<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title></title>
    <link rel="stylesheet" type="text/css" href="/static/css/icon.css"/>
    <link rel="stylesheet" type="text/css" href="/static/css/weui.css"/>
    <link rel="stylesheet" type="text/css" href="/static/css/weui2.css"/>
    <link rel="stylesheet" type="text/css" href="/static/css/style.css"/>
    <script src="/static/js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
    <script src="/static/js/zepto.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/static/js/picker.js" type="text/javascript" charset="utf-8"></script>
    <script src="/static/js/highcharts.js" type="text/javascript" charset="utf-8"></script>
    <script src="/static/js/vue.js" type="text/javascript" charset="utf-8"></script>
    <script src="/static/js/all.js?v=2" type="text/javascript" charset="utf-8"></script>
    <script src="/static/js/no-data-display.js?v=2" type="text/javascript" charset="utf-8"></script>
</head>
<body>

<div class="sale">
    <div class="left">
        <div id="sale"></div>
    </div>
    <div class="right">
        <a href="/sale.html?brand_id={{ brand_id }}" >
            <img src="/static/img/i3.png"/>
            <label>人气菜品</label>

            <p>&nbsp;&nbsp;</p>

        </a>
        <a href="unsalable.html">
            <img src="/static/img/i4.png"/>
            <label>滞销菜品</label>

            <p>&nbsp;&nbsp;</p>
        </a>
        <a href="retreat.html">
            <img src="/static/img/i5.png"/>
            <label>退品情况</label>

            <p>¥ 0</p>
        </a>
        <a href="commission.html">
            <img src="/static/img/i6.png"/>
            <label>员工提成</label>

            <p>¥ 0</p>
        </a>
        <a href="give.html">
            <img src="/static/img/i7.png"/>
            <label>菜品赠送</label>

            <p>¥ {{ sale_total }}</p>
        </a>
        <a href="timeMenu.html" class="timeMmenu">
            <img src="/static/img/i8.png"/>
            <label>时段菜品</label>

            <p>&nbsp;</p>
        </a>
    </div>
</div>
<script type="text/javascript">
    $("a").click(function(){
            alert("111")
        })
    //饼图
    $(function () {

        var delay ={{ config.get("AJAX_REQUEST_DELAY") }};
        var sale_percent_data = [];

        $('#sale').highcharts({
            chart: {

                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            legend: {
                enabled: false
            },
            title: {
                text: '菜品小类销售：{{ sale_total }}'
            },
            tooltip: {
                headerFormat: '{series.name}<br>',
                pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
            },
            lang: {
                noData: "暂无数据" //真正显示的文本
            },
            noData: {
                position: {
                    //相对于绘图区定位无数据标签的位置。 默认值：[object Object].
                    //align: 'right',
                    //verticalAlign: 'bottom'
                },
                // Custom svg attributes
                attr: {     //无数据标签中额外的SVG属性
                    //'stroke-width': 1,
                    //stroke: '#cccccc'
                },
                // Custom css
                style: {    //对无数据标签的CSS样式。 默认值：[object Object].
                    //fontWeight: 'bold',
                    //fontSize: '15px',
                    //color: '#202030'
                }
            },
            plotOptions: {
                pie: {
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        distance: -50,
                        style: {
                            fontWeight: 'bold',
                            color: 'white'
                        },
                        format: ''
                    },
                    showInLegend: true
                }
            },
            series: [{
                type: 'pie',
                size: '160%',
                name: '菜品销售占比',
                center: ['50%', '50%'],
                data: sale_percent_data
            }],
            credits: {
                enabled: false     //不显示LOGO
            }
        })

        var chart = $('#sale').highcharts();
        window.onload = function () {
            update_highcharts()
        }
        function getRandom(n) {
            return Math.floor(Math.random() * n + 1)
        }

        function update_highcharts() {


            $.ajax({
                url: '/ajax_get_product_sale_info',
                type: 'get',
                data: {
                    "shop_id": "{{ shop_id }}",
                    "brand_id": "{{ brand_id }}"
                },
                success: function (data) {

                    if (data.status) {
                        chart.series[0].setData([['支付宝', 50], ['微信', getRandom(100)]]);
                        var sale_data = JSON.parse('{{ category_percent|safe }}');
                        var sale_percent_data = [];

                        for (var i = 0; i++, i <= sale_data.length - 1;) {
                            sale_percent_data.push([sale_data[i]['菜品小类'], parseFloat(sale_data[i]['百分比'])])

                        }
                        if (sale_data.length == 0) {
                            sale_percent_data = [['暂无数据', 0.01]];
                        }

                        chart.series[0].setData(sale_percent_data);

                        $(".right").empty().append(data.data.right_html);

                    }


                },
                error: function () {

                }
            });
            setTimeout(update_highcharts, delay);
        }
    });
</script>
</body>
</html>
